<script>
export default {
  name: 'explains view',
  inject: {
    topics: {
      type: Array
    }
  },
  data() {
    return {
      explains: []
    }
  },
  methods: {
    load(tid) {
      let topic = this.topics.find( t => t.id == tid );
      this.explains = topic.explains;
    }
  },
  created() {
    // 根据路由参数取得话题的解答内容
    this.load( this.$route.params.id );
    // 监听路由参数的变化
    this.$watch( '$route.params.id', this.load );
  }
};
</script>

<template>
  <div class="topic-explains">
    <div v-if="explains.length == 0">暂无解答</div>
    <div class="explain" v-for="e in explains" :key="e.id">
      {{e.content}}
    </div>
  </div>
</template>

<style scoped>
.topic-explains {
    border: 1px solid blue;
    margin: 10px;
}

.explain {
    margin: 10px;
    background: #dfdfdf;
}
</style>